.boxZhuan{
    width:100px;
    height:100px;
    transform-style:preserve-3d;
    position:absolute;
    left:60%;
    bottom:20%;
    transform:rotateX(-36deg) rotateY(-28deg);

    animation:gun 10s infinite linear;
}
.boxZhuan>div{
    width:100%;
    height:100%;
    position:absolute;
    left: 0;
    top: 0;
    text-align: center;
    line-height: 100px;
}
.to{
    background-color: rgba(255,0,0,0.6);
    transform:translate(50%) rotateY(90deg);
}
.bo{
    background-color:rgba(0,255,0,0.6);
    transform:translate(-50%) rotateY(-90deg);
}
.le{
    background-color:rgba(0,0,255,0.6);
    transform:translate(0,-50%) rotateX(90deg);
}
.ri{
    background-color:rgba(0,255,255,0.6);
    transform:translate(0,50%) rotateX(-90deg);
}
.qi{
    background-color:rgba(255,255,0,0.6);
    transform:translateZ(50px);
}
.hou{
    background-color:rgba(100,100,0,0.6);
    transform:translateZ(-50px);
}
@keyframes gun {
    0%{
        transform:rotateY(0deg) rotateX(0deg) ;
    }

    100%{
        transform:rotateY(360deg) rotateX(360deg) ;
    }
}